<template>
  <MPageHeader>
    <template #title>
      详情
    </template>
    <template #extra>
      <a-space :size="10">
        <a-input placeholder="请输入搜索内容">
          <template #prefix>
            <!-- <SearchOutlined /> -->
            <svg-icon class="anticon" icon-class="search" />
          </template>
        </a-input>
        <a-button class="w-120" @click="cancelHandle">取消</a-button>
        <a-button type="primary" class="w-120">确定创建</a-button>
      </a-space>
    </template>
  </MPageHeader>
  <MPageContainer>
    <div>详情</div>
  </MPageContainer>
</template>

<script lang="ts">
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { defineComponent, getCurrentInstance, onMounted, reactive } from 'vue'
  import { useStore } from '@/store'
  import { getUser } from '@/utils/token'

  export default defineComponent({
    name: 'Welcome',
    components: {
      SearchOutlined
    },
    setup() {
      const { proxy }: any = getCurrentInstance()
      onMounted(() => {
      })

      const cancelHandle = () => {
        proxy.$router.go(-1)
      }

      return {
        cancelHandle
      }
    },
    computed: {
      columns() {
        return [
          {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
          },
          {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
          },
          {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
          },
        ]
      }
    }
  })
</script>

<style scoped lang="less">
  .header-container {
    background: #fff;
    padding: 10px 20px 14px 20px;
    box-sizing: border-box;
  }
  .count-item {
    padding: 0 20px;
    border-right: 1px solid #e3e2e2;
  }
  .count-item:last-child {
    border-right: 0;
  }
  .ant-table-striped :deep(.table-striped) td {
    background-color: #F6F8FA;
  }
</style>
